<template lang="html">
  <div class="">
    <div class="search">
      <div class="input">
        <p>
          <label>位置名称 : </label>
          <input v-model="searchData.locationName" type="text" placeholder="请输入" >
        </p>
        <P class="siteNum">
          <label>位置编号 : </label>
          <input v-model="searchData.locationNum" type="text" placeholder="请输入" class="siteipt">
        </P>
        <P class="siteNum">
          <label>是否分享 : </label>
          <el-select v-model="searchData.isShare" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option value="Y" label="是"/>
            <el-option value="N" label="否"/>
          </el-select>
        </P>
        <P class="siteNum">
          <label>是否上架 : </label>
          <el-select v-model="searchData.isOnline" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option value="Y" label="是"/>
            <el-option value="N" label="否"/>
          </el-select>
        </P>
        <p>
          <el-button type="primary" class="se" style="margin-left:16px;" @click="search">搜索</el-button>
        </p>
      </div>

    </div>

    <div class="add">
      <el-button type="primary" @click="dialogs">新增</el-button>
      <el-button type="danger" @click="del">批量删除</el-button>
    </div>

    <dialogVue :dialog="dialog" :state="false" title="操作" @close="changeData">
      <slot>
        <el-form ref="ruleForm" :model="addAdvert" label-width="120px" class="demo-ruleForm">
          <el-form-item label="选择广告类型" >
            <el-select v-model="locationNum" placeholder="请选择" @change="getlocationNum">
              <el-option value="">请选择</el-option>
              <el-option value="POP_UP_ADS" label="浮窗广告">浮窗广告</el-option>
              <el-option value="1" label="普通广告">普通广告</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="位置编号">
            <el-input
              v-model="addAdvert.locationNum"
              :disabled="disabled"
              placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="位置名称" >
            <el-input v-model="addAdvert.locationName" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="IOS链接" >
            <el-input v-model="addAdvert.locationUrl" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="Android链接" >
            <el-input v-model="addAdvert.androidUrl" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="位置描述" >
            <el-input v-model="addAdvert.locationDesc" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="位置推广图" prop="promotePrice">
            <el-upload
              ref="upload"
              :limit="1"
              :action="uploadingImg"
              :on-change="changeImgFile"
              :http-request="custom"
              :file-list="fileList"
              :on-exceed="exceed"
              :auto-upload="false"
              class="upload-demo"
              list-type="picture">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="custom(0)">上传到服务器</el-button>
            </el-upload>
          </el-form-item>

          <el-form-item label="打开方式" >
            <el-select v-model="addAdvert.openType" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option value="0" label="内部">内部</el-option>
              <el-option value="1" label="外部">外部</el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-if="this.locationNum == 'POP_UP_ADS'" label="目标人群">
            <el-select v-model="addAdvert.target" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option value="1" label="未登录用户"/>
              <el-option value="2" label="全部用户"/>
              <el-option value="3" label="登录用户"/>
            </el-select>
          </el-form-item>
          <el-form-item v-if="this.locationNum == 'POP_UP_ADS'" label="显示模式">
            <el-select v-model="addAdvert.display" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option value="1" label="每天无限"/>
              <el-option value="2" label="每天一次"/>
              <el-option value="3" label="定时无限"/>
            </el-select>
          </el-form-item>
          <el-form-item v-show="this.locationNum == 'POP_UP_ADS' && this.addAdvert.display == '3'" label="定时开始时间">
            <el-select v-model="addAdvert.startTime" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option :value="0">0</el-option>
              <el-option
                v-for="count in (0,23)"
                :key="count"
                :value="count"
                :label="count"/>
            </el-select>
          </el-form-item>
          <el-form-item v-show="this.locationNum == 'POP_UP_ADS' && this.addAdvert.display == '3'" label="定时结束时间">
            <el-select v-model="addAdvert.endTime" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option :value="0">0</el-option>
              <el-option
                v-for="(count,key) in 23"
                :key="key"
                :value="count"
                :label="count"/>
            </el-select>
          </el-form-item>
          <el-form-item label="上架时间" >
            <el-date-picker
              v-model="addAdvert.shelfTime"
              type="datetime"
              placeholder="上架时间"/>
          </el-form-item>
          <el-form-item label="下架时间" >
            <el-date-picker
              v-model="addAdvert.offShelfTime"
              type="datetime"
              placeholder="下架时间"/>
          </el-form-item>
          <el-form-item label="是否分享" >
            <el-select v-model="addAdvert.isShare" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option value="Y" label="是"/>
              <el-option value="N" label="否"/>
            </el-select>
          </el-form-item>

          <el-form-item label="分享标题" >
            <el-input v-model="addAdvert.shareTitle" placeholder="请输入"/>
          </el-form-item>
          <el-form-item label="分享描述" >
            <el-input v-model="addAdvert.shareDesc" placeholder="请输入"/>
          </el-form-item>
          <!--  分享图片-->
          <el-form-item label="分享图片" prop="promotePrice">
            <el-upload
              ref="upload"
              :limit="1"
              :action="uploadingImg"
              :on-change="changeImgFile1"
              :http-request="custom1"
              :file-list="fileList1"
              :on-exceed="exceed1"
              :auto-upload="false"
              class="upload-demo"
              list-type="picture">
              <el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success" @click="custom1()">上传到服务器</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="分享连接" >
            <el-input v-model="addAdvert.shareUrl" placeholder="请输入"/>
          </el-form-item>

          <el-form-item class="confirm">
            <el-button v-if="btnState == '1'" type="primary" @click="submitForm( )">创建</el-button>
            <el-button v-if="btnState == '2'" type="primary" @click="update()">更新</el-button>
          </el-form-item>
        </el-form>
      </slot>
    </dialogVue>

    <el-dialog
      :visible.sync="centerDialogVisible"
      title="详情"
      width="50%"
    >
      <div v-for="(item,key) in addAdvert">
        <div v-if="infoData[key]" :class="key=='locationImage'||key=='shareImage'? 'bigbox':'' " class="box">
          <div class="title"><span> {{ infoData[key] }} </span></div>
          <div v-if="key!='locationImage'&&key!='shareImage'" class="box_info">{{ addAdvert[key] }}</div>
          <div v-if="key==&quot;locationImage&quot;" class="locationImage">
            <img :src="addAdvert[key]">
          </div>
          <div v-if="key==&quot;shareImage&quot;" class="shareImage">
            <img :src="addAdvert[key]">
          </div>
        </div>
      </div>

    </el-dialog>

    <tableVue v-loading="pageData.loading" :list="list" :state="true" :total="total" @changeData="selectionVal" @sizeChange="handSize">
      <slot>
        <el-table-column label="操作" align="center" width="400" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="details(scope.row)"
            >
              详情
            </el-button>
            <el-button
              v-if="scope.row.isOnline== 'Y' || scope.row.isOnline== '是'"
              size="mini"
              type="danger"
              @click="changeLine(scope.row,0)"
            >
              下架
            </el-button>
            <el-button
              v-else-if="scope.row.isOnline== 'N' || scope.row.isOnline== '否'"
              size="mini"
              type="success"
              @click="changeLine(scope.row,1)"
            >
              上架
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="redact(scope.row)">编辑
            </el-button>

            <el-button
              size="mini"
              type="danger"
              class="del"
              @click="handleEdit(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </slot>
    </tableVue>
  </div>
</template>

<script>
import Data from "./indxe.js";
import dialogVue from "@/components/dialog.vue";
import tableVue from "@/components/alltable.vue";
import { upLoadingImg } from "@/api/shoppingCentre/shoppingCentre";

import {
  advertisingList,
  addAdvert,
  updateAdvert,
  delAdvert,
  searchId,
  searchSite,
  changeOnine,
  serachData
} from "@/api/AppStart/advertising.js";

export default {
  components: {
    tableVue,
    dialogVue
  },
  data() {
    return JSON.parse(JSON.stringify(Data));
  },
  mounted() {
    this.getAdverlist(this.page);
  },
  methods: {
    changeLine(val, num) {
      changeOnine(val.locationId).then(res => {
        if (res.data.code == "OK") {
          if (num == 0) {
            this.$message.success("下架成功");
          } else {
            this.$message.success("上架成功");
          }
          this.getAdverlist(this.page);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    getlocationNum(val) {
      if (val == "POP_UP_ADS") {
        this.addAdvert.locationNum = val;
        this.disabled = true;
      } else {
        this.addAdvert.locationNum = "";
        this.disabled = false;
      }
    },
    // 获取活动列表
    getAdverlist(obj) {
      advertisingList(obj).then(res => {
        console.log(res);
        if (res.data.code == "OK") {
          this.total = res.data.data.total;
          var result = res.data.data.records;
          var len = result.length;
          if (len > 0) {
            for (var i = 0; i < len; i++) {
              result[i].gmtCreate = this.switchTime(result[i].gmtCreate);
              result[i].gmtUpdate = this.switchTime(result[i].gmtUpdate);
              // if (result[i].locationNum == 'POP_UP_ADS') {
              //   result[i].locationNum = '浮窗广告'
              // }
              // result[i].locationNum = result[i].locationNum == 'POP_UP_ADS' ? '浮窗广告' : '普通广告'
            }
            this.list.tbody = result;
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    changeData(data) {
      this.dialog = data;
    },
    submitForm() {
      // 添加
      // console.log(this.addAdvert)
      // return false
      if (!this.addAdvert.startTime) {
        this.addAdvert.startTime = "0";
      }
      if (!this.addAdvert.endTime) {
        this.addAdvert.endTime = "23";
      }
      if (!this.addAdvert.locationImage) {
        this.$message.error("请上传位置推广图到服务器");
        return false;
      }
      if (this.addAdvert.isShare == "Y") {
        if (!this.addAdvert.shareImage) {
          this.$message.error("请上传分享图片到服务器");
          return false;
        }
      }
      if (
        this.addAdvert.startTime > this.addAdvert.endTime ||
        this.addAdvert.shelfTime > this.addAdvert.offShelfTime
      ) {
        this.$message.error("开始时间必须大于结束时间");
        return false;
      }
      // ***************************************************
     
      addAdvert(this.addAdvert).then(res => {
        if (res.data.message == "成功") {
          this.$message.success("添加成功");
          this.dialog = false;
          this.getAdverlist(this.page);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 更新
    update() {
      var obj = this.addAdvert;
      delete obj.gmtCreate;
      delete obj.gmtUpdate;
   
     
      obj.shelfTime = +obj.shelfTime;
      obj.startTime = +obj.startTime;
      obj.offShelfTime = +obj.offShelfTime;
      obj.locationNum =
        obj.locationNum == "浮窗广告"
          ? "POP_UP_ADS"
          : this.addAdvert.locationNum;
      if (this.addAdvert.openType == "内部") {
        this.addAdvert.openType = "0";
      } else if (this.addAdvert.openType == "外部") {
        this.addAdvert.openType = "1";
      }
      if (this.addAdvert.isOnline == "是") {
        this.addAdvert.isOnline = "Y";
      } else if (this.addAdvert.isOnline == "否") {
        this.addAdvert.isOnline = "N";
      }
      if (this.addAdvert.isShare == "是") {
        this.addAdvert.isShare = "Y";
      } else if (this.addAdvert.isShare == "否") {
        this.addAdvert.isShare = "N";
      }

      
      console.log(obj)
      updateAdvert(obj).then(res => {
        if (res.data.code == "OK") {
          this.$message.success("更新成功");
          this.dialog = false;
          this.getAdverlist(this.page);
          this.fileList = [];
          this.fileList1 = [];
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    dialogs() {
      // Object.keys(this.addAdvert).forEach(key=>this.addAdvert[key]='')
      this.imgData = {};
      this.sharImg = {};
      this.addAdvert = {};
      this.fileList = [];
      this.fileList1 = [];
      this.dialog = true;
      this.btnState = "1";
    },
    // 批量删除
    del() {
      this.delMessage(() => {
        delAdvert(this.delArr).then(res => {
          if (res.data.code == "OK") {
            this.$message.success("删除成功");
            this.getAdverlist(this.page);
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },

    selectionVal(data) {
      this.delArr = [];
      for (var i = 0; i < data.length; i++) {
        this.delArr.push(data[i].locationId);
      }
    },

    handSize(val) {
      this.page.current = val;
      this.getAdverlist(this.page);
    },
    //  详情
    details(val) {
      this.addAdvert = val;

      if (this.addAdvert.openType == "0") {
        this.addAdvert.openType = "内部";
      } else if (this.addAdvert.openType == "1") {
        this.addAdvert.openType = "外部";
      }
      if (this.addAdvert.isOnline == "Y") {
        this.addAdvert.isOnline = "是";
      } else if (this.addAdvert.isOnline == "N") {
        this.addAdvert.isOnline = "否";
      }
      if (this.addAdvert.isShare == "Y") {
        this.addAdvert.isShare = "是";
      } else if (this.addAdvert.isShare == "N") {
        this.addAdvert.isShare = "否";
      }
      this.centerDialogVisible = true;
    },
    // 删除
    handleEdit(val) {
      var arr = [];
      arr.push(val.locationId);
      this.delMessage(() => {
        delAdvert(arr).then(res => {
          if (res.data.message == "成功") {
            this.$message.success("删除成功");
            this.getAdverlist(this.page);
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },
    // 编辑
    redact(val) {
      
      this.fileList = [];
      this.fileList1 = [];
      this.btnState = "2";
      this.fileList.push({
        name: "",
        url: val.locationImage
      });
      this.fileList1.push({
        name: "",
        url: val.shareImage
      });
      this.addAdvert = val;
      this.dialog = true;
      this.locationNum = val.locationNum;

      if (this.locationNum == "POP_UP_ADS" || this.locationNum == "浮窗广告") {
        this.disabled = true;
        this.locationNum = "POP_UP_ADS";
      } else {
        this.disabled = false;
      }
    },
    // 搜索
    search() {
      serachData(this.searchData).then(res => {
        if (res.data.code == "OK") {
          this.$message.success("搜索成功");
          var ArrData = res.data.data.records;
          for (var i = 0, len = ArrData.length; i < len; i++) {
            ArrData[i].gmtCreate = this.switchTime(ArrData[i].gmtCreate);
            ArrData[i].gmtUpdate = this.switchTime(ArrData[i].gmtUpdate);
          }
          this.list.tbody = ArrData;
        }
      });
    },
    // ***************************************************************  图片上传
    changeImgFile(file) {
      // 拿到单张图片的地址
      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        this.imgData.base64Str = reader.result.split(",")[1];
        this.imgData.id = file.uid;
        this.imgData.fileOriginName = file.name;
        this.imgData.fileType = file.name.split(".")[1];
      };
    },
    changeImgFile1(file) {
      // 拿到单张图片的地址
      const reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        this.sharImg.base64Str = reader.result.split(",")[1];
        this.sharImg.id = file.uid;
        this.sharImg.fileOriginName = file.name;
        this.sharImg.fileType = file.name.split(".")[1];
      };
    },
    exceed(files, fileList) {
      this.$message.error("只能传一张图片");
    },
    exceed1(files, fileList1) {
      this.$message.error("只能传一张图片");
    },
    custom(file) {
      if (this.imgData.id) {
        this.$message({
          showClose: true,
          message: "图片正常在上传请稍后.......",
          type: "warning"
        });
        var data = {
          base64Str: this.imgData.base64Str,
          fileOriginName: this.imgData.fileOriginName,
          fileType: this.imgData.fileType,
          id: this.imgData.id
        };
        upLoadingImg(data).then(res => {
          if (res.data.code == "OK") {
            this.$message.success("上传图片成功");
            this.addAdvert.locationImage = res.data.data.fileURL;
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        this.$message.error("请选择位置推广图");
      }
    },
    custom1(file) {
      if (this.sharImg.id) {
        this.$message({
          showClose: true,
          message: "图片正常在上传请稍后.......",
          type: "warning"
        });
        var data = {
          base64Str: this.sharImg.base64Str,
          fileOriginName: this.sharImg.fileOriginName,
          fileType: this.sharImg.fileType,
          id: this.sharImg.id
        };
        upLoadingImg(data).then(res => {
          if (res.data.code == "OK") {
            this.$message.success("上传图片成功");
            this.addAdvert.shareImage = res.data.data.fileURL;
          } else {
            this.$message.error(res.data.message);
          }
        });
      } else {
        this.$message.error("请选择分享图片");
      }
    }
  }
};
</script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  margin-top: 10px;
  display: flex;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width: 200px;
  height: 20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
.Advert {
  margin: 0 auto;
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
  padding-left: 10px;
}
.Advert span,
.creat_time span,
.update_time span {
  font-size: 16px;
  width: 120px;
  color: #606266;
  text-align: right;
  line-height: 36px;
  padding-right: 12px;
}
input {
  outline: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 200px;
}
.creat_timem,
.update_time {
  display: flex;
}
.creat_time span,
.update_time span {
  margin-right: 10px;
}
.siteNum {
  margin-left: 40px;
}
#dailogbox {
  width: 100%;
}
.box {
  display: flex;
  margin: 18px 0;
  font-size: 16px;
  border: 1px solid #ccc;
  align-items: center;
}
.box .title {
  width: 250px;
  text-align: left;
  padding: 15px 0;
  padding-left: 50px;
  box-sizing: border-box;
  line-height: 36px;
  border-right: 1px solid #ccc;
}
.box .box_info {
  padding-left: 18px;
}
.bigbox {
  border: #ccc 1px solid;
  height: 150px;
}
.bigbox .title {
  padding: 0;
  line-height: 150px;
  padding-left: 50px;
}
.locationImage,
.shareImage {
  height: 128px;
  padding-left: 30px;
}
.locationImage img,
.shareImage img {
  height: 100%;
}
.el-dialog__wrapper /deep/ .el-dialog__body {
  margin-bottom: 150px;
}
</style>
